<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的货物</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="container">
        <el-form class="search-form">
            <el-form-item>
                <label>出发地：</label>
                <el-input v-model="search.start" class="search-input"></el-input>
                <label>目的地：</label>
                <el-input v-model="search.destination" class="search-input"></el-input>
                <label>货物类型：</label>
                <el-select v-model="search.goodType" placeholder="请选择" style="margin-right: 30px" clearable>
                    <el-option
                            v-for="item in search.goodsOptions"
                            :key="item.typeId"
                            :label="item.name"
                            :value="item.typeId">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="getGoods()">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="list" v-for="item in goodsInf">
            <el-card class="box-card">
                <el-descriptions class="margin-top" :column="3" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            货主姓名
                        </template>
                        {{item.customerName}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            手机号
                        </template>
                        {{item.telephone}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            物品名称
                        </template>
                        {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            货物类型
                        </template>
                        <el-tag size="small">{{item.typeName}}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            物品重量
                        </template>
                        {{item.weight}}kg
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            发货地址
                        </template>
                        {{item.start}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            运输目的地
                        </template>
                        {{item.destination}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            价格要求
                        </template>
                        <span style="color: #EAAE3E;font-size: 18px">{{item.feesMin}} - {{item.feesMax}}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            发布时间
                        </template>
                        {{item.createTime}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            备注
                        </template>
                        {{item.remark}}
                    </el-descriptions-item>
                </el-descriptions>
                <span style="display:inline-block;margin-top: 10px;font-size: 15px">已有{{item.count}}人接单</span>
                <el-button type="primary" size="small" class="button_click pull-right"
                           @click="checkGoods(item)"
                           :disabled="item.isIntention">修改货物
                </el-button>
                <el-button type="danger" size="small" class="button_click pull-right"
                           @click="delGoods(item.goodId)"
                           :disabled="item.isIntention">删除货物
                </el-button>
            </el-card>
        </div>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                :current-page="page.current"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-bottom: 30px">
        </el-pagination>
    </div>
    <!--修改货物模态框/-->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form :model="page">
            <el-form-item label="货物名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="货物类别" prop="typeId">
                <el-select v-model="form.typeId" placeholder="请选择货物类别">
                    <el-option
                            v-for="item in typeOptions"
                            :key="item.typeId"
                            :label="item.name"
                            :value="item.typeId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="货物重量" prop="weight">
                <el-input v-model="form.weight" style="width: 200px">
                    <template slot="append">kg</template>
                </el-input>
            </el-form-item>
            <el-form-item label="运输起点" prop="start" style="width: 300px">
                <el-input v-model="form.start"></el-input>
            </el-form-item>
            <el-form-item label="运输终点" prop="destination" style="width: 300px">
                <el-input v-model="form.destination"></el-input>
            </el-form-item>
            </el-col>
            <el-form-item label="价格区间">
                <el-input v-model="form.feesMin" placeholder="￥" style="width: 100px"></el-input>
                --
                <el-input v-model="form.feesMax" placeholder="￥" style="width: 100px"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="modGood()">确 定</el-button>
  </span>
    </el-dialog>
</div>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/vue-v2.6.11.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/common.js"></script>
<script src="../js/apiurls.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            activeName: 'first',
            goodsInf: [],
            searchContent: '',
            dialogVisible: false,
            search: {
                start: '',
                destination: '',
                goodType: '',
                goodsOptions: []
            },
            form: {
                goodId: '',
                name: '',
                typeId: '',
                weight: '1',
                start: '',
                destination: '',
                feesMin: 0,
                feesMax: '',
                remark: ''
            },
            typeOptions: [],
            page: {
                //当前页
                current: 1,
                //最大页数
                total: '',
                size: 10
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            getGoodTypes() {
                let that = this
                let data = ''
                getPostData(apiUrls.goodType.getGoodTypes, data, 'post', function (data) {
                    if (data.msg === 'success') {
                        that.search.goodsOptions = data.data
                        that.typeOptions = data.data
                    } else {
                        that.$message({
                            message: "获取货物类型列表失败",
                            type: 'error'
                        });
                    }
                })
            },
            getGoods() {
                let that = this
                let data = {
                    "destination": that.search.destination,
                    "pageRequest": {
                        "current": that.page.current,
                        "size": that.page.size
                    },
                    "start": that.search.start,
                    "typeId": that.search.goodType
                }
                getPostData(apiUrls.goods.selectCustomerGoods, data, 'post', function (data) {
                    if (data.msg === 'success') {
                        that.goodsInf = data.data.records
                        that.page.total = data.data.total
                    } else {
                        this.$message({
                            message: data.msg(),
                            type: 'error'
                        });
                    }
                })
            },
            checkGoods(item) {
                let that = this
                getPostData(apiUrls.orders.checkOrders, item.goodId, 'post', function (result) {
                    if (result.msg === 'success') {
                        that.dialogVisible = true
                        that.form = item
                    } else {
                        that.$message({
                            message: result.msg,
                            type: 'error'
                        });
                    }
                })
            },
            modGood() {
                let that = this
                let data = {
                    goodId: that.form.goodId,
                    "destination": that.form.destination,
                    "feesMax": that.form.feesMax,
                    "feesMin": that.form.feesMin,
                    "name": that.form.name,
                    "remark": that.form.remark,
                    "start": that.form.start,
                    "typeId": that.form.typeId,
                    "weight": that.form.weight
                }
                console.log(data)
                getPostData(apiUrls.goods.modGood, data, 'post', function (data) {
                    if (data.msg === 'success') {
                        that.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        that.dialogVisible = false
                    } else {
                        that.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                })

            },
            delGoods(id) {
                let that = this
                that.$confirm('您确定要删除此条货物吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        "goodId": id
                    }
                    getPostData(apiUrls.goods.delGood, data, 'post', function (result) {
                        if (result.code === 0) {
                            that.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            that.getGoods();
                        } else {
                            that.$message({
                                message: result.msg,
                                type: 'error'
                            });
                        }
                    })
                })
            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.page.size = size;
                console.log(this.page.size)  //每页下拉显示数据
                this.getGoods()
            },
            handleCurrentChange: function (currentPage) {
                this.page.current = currentPage;
                console.log(this.page.current)  //点击第几页
                this.getGoods()
            },
        },
        mounted() {
            this.getGoodTypes()
            this.getGoods()
        }
    })
</script>
</body>
</html>